<template>
	<div class="mouse-position">
		经度：{{ lngLat.lng.toFixed(6) }} 纬度：{{ lngLat.lat.toFixed(6) }}
	</div>
</template>

<script setup>
import useMapboxGl from '@/components/mapbox/index.js'
import { nextTick } from 'vue'

nextTick(() => {
	useMapbox.mousePosition()
})

const useMapbox = useMapboxGl()

const lngLat = useMapbox.lngLat
</script>

<style scoped>
.mouse-position {
	padding: 0 6px;
	background: #fff;
	position: fixed;
	bottom: 10px;
	right: 10px;
}
</style>
